<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>问诊设置</title>
    <link
      rel="stylesheet"
      href="../../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css"
    />
    <script src="../../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../css/wzsz.css" />
    <link rel="stylesheet" href="../../src/font/字体图标/iconfont.css" />
    <script src="../../src/font/字体图标/iconfont.js"></script>
  </head>
  <body>
    <div class="h"></div>
    <div class="bj-box">
      <div class="modal-bj">
        <div class="guanbi">
          <span>编辑问诊设置</span><span class="iconfont icon-guanbi"></span>
        </div>
        <label>
          <span>*问诊名称:</span><input type="text" id="mc" value="" />
        </label>
        <label>
          <span>*问诊原价:</span> <input type="number" id="yj" value="" />
        </label>
        <label>
          <span>*问诊现价:</span> <input type="number" id="xj" value="" />
        </label>
        <label>
          <span>*问诊分类:</span>
          <select disabled>
            <option value="0">图文问诊</option>
          </select>
        </label>
        <label>
          <span>启用状态:</span>
          <div class="radio-box">
            <input type="radio" name="qyzt" value="1" class="kai" />启用
            <input type="radio" name="qyzt" value="0" class="guan" />禁用
          </div>
        </label>

        <button id="qx">取消</button>
        <button id="qd">保存</button>
      </div>
    </div>
    <div class="container-fluid">
      <div class="content">
        <div class="myTable">
          <table>
            <thead>
              <tr>
                <th>ID</th>
                <th>问诊名称</th>
                <th>问诊原价</th>
                <th>问诊现价</th>
                <th>问诊分类</th>
                <th>启用状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
        <div id="pageDiv">
          <div id="allPage"></div>
          <select>
            <option value="1">10条/页</option>
          </select>
          <span id="pre"> < </span>

          <span class="page">1</span>

          <span id="next"> > </span>
          <div id="tiaozhuan">
            <span>前往</span>
            <input type="text" id="tiaopage" />
            <span>页</span>
            <button id="tiao">跳转</button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    let arr = [
      {
        id: 1,
        mingcheng: "开药图文问诊",
        yuanjia: "20",
        xianjia: "19",
        fenlei: "开药图文问诊",
        qiyong: "1",
      },
      {
        id: 2,
        mingcheng: "开药视频问诊",
        yuanjia: "30",
        xianjia: "29",
        fenlei: "开药视频问诊",
        qiyong: "0",
      },
      {
        id: 3,
        mingcheng: "急速图文问诊",
        yuanjia: "20",
        xianjia: "19",
        fenlei: "急速图文问诊",
        qiyong: "1",
      },
      {
        id: 4,
        mingcheng: "急速视频问诊",
        yuanjia: "30",
        xianjia: "29",
        fenlei: "急速视频问诊",
        qiyong: "0",
      },
      {
        id: 5,
        mingcheng: "开药图文问诊",
        yuanjia: "20",
        xianjia: "19",
        fenlei: "开药图文问诊",
        qiyong: "1",
      },
      {
        id: 6,
        mingcheng: "开药视频问诊",
        yuanjia: "30",
        xianjia: "29",
        fenlei: "开药视频问诊",
        qiyong: "1",
      },
      {
        id: 7,
        mingcheng: "急速图文问诊",
        yuanjia: "20",
        xianjia: "19",
        fenlei: "急速图文问诊",
        qiyong: "0",
      },
      {
        id: 8,
        mingcheng: "急速视频问诊",
        yuanjia: "30",
        xianjia: "29",
        fenlei: "急速视频问诊",
        qiyong: "1",
      },
      {
        id: 9,
        mingcheng: "开药图文问诊",
        yuanjia: "20",
        xianjia: "19",
        fenlei: "开药图文问诊",
        qiyong: "1",
      },
      {
        id: 10,
        mingcheng: "开药视频问诊",
        yuanjia: "30",
        xianjia: "29",
        fenlei: "开药视频问诊",
        qiyong: "1",
      },
      {
        id: 11,
        mingcheng: "急速图文问诊",
        yuanjia: "20",
        xianjia: "19",
        fenlei: "急速图文问诊",
        qiyong: "1",
      },
      {
        id: 12,
        mingcheng: "急速视频问诊",
        yuanjia: "30",
        xianjia: "29",
        fenlei: "急速视频问诊",
        qiyong: "1",
      },
      {
        id: 13,
        mingcheng: "开药图文问诊",
        yuanjia: "20",
        xianjia: "19",
        fenlei: "开药图文问诊",
        qiyong: "0",
      },
      {
        id: 14,
        mingcheng: "开药视频问诊",
        yuanjia: "30",
        xianjia: "29",
        fenlei: "开药视频问诊",
        qiyong: "1",
      },
      {
        id: 15,
        mingcheng: "急速图文问诊",
        yuanjia: "20",
        xianjia: "19",
        fenlei: "急速图文问诊",
        qiyong: "1",
      },
      {
        id: 16,
        mingcheng: "急速视频问诊",
        yuanjia: "30",
        xianjia: "29",
        fenlei: "急速视频问诊",
        qiyong: "1",
      },
    ];
    let dangqianyeData = [];
    let dangqianyePage = 1;
    let maxPage;
    let qyz;
    let bjId;
    let wzmc;
    let wzyj;
    let wzxj;
    let userQy;
    let fl;

    showPage(arr);
    showData(arr, dangqianyePage);

    // 将数据渲染到tbody
    function show(data) {
      $("tbody").html("");
      for (let i = 0; i < data.length; i++) {
        if (data[i].qiyong == 1) {
          $("tbody").append(`
        <tr>
          <td>${data[i].id}</td>
          <td>${data[i].mingcheng}</td>
          <td>${data[i].yuanjia}</td>
          <td>${data[i].xianjia}</td>
          <td>${data[i].fenlei}</td>
          <td class="qy">
            <div data-id="${data[i].id}" class="qy-box">
              <span>启用</span><div class="qy-circle"></div>
            </div>
          </td>
          <td><button data-id="${data[i].id}" class='btn-bj'>编辑</button></td>
        </tr>
      `);
        } else {
          $("tbody").append(`
        <tr>
          <td>${data[i].id}</td>
          <td>${data[i].mingcheng}</td>
          <td>${data[i].yuanjia}</td>
          <td>${data[i].xianjia}</td>
          <td>${data[i].fenlei}</td>
          <td class="qy">
            <div data-id="${data[i].id}" class="jy-box">
              <span>禁用</span><div class="jy-circle"></div>
            </div>
          </td>
          <td><button data-id="${data[i].id}" class='btn-bj'>编辑</button></td>
        </tr>
      `);
        }
      }
    }

    // 渲染页码到page里
    function showPage(data) {
      maxPage = Math.ceil(data.length / 10);
      $("#allPage").text(`共${data.length}条`);
      $(".page").html("");
      for (let i = 1; i <= maxPage; i++) {
        $(".page").append(`<span class='addPage'>${i}</span>`);
      }
    }

    // 截取数据 根据页码截取相应数据 并将数据渲染到tbody 以及页码样式
    function showData(data, pageNum) {
      let qishi = (pageNum - 1) * 10;
      dangqianyeData = data.slice(qishi, qishi + 10);
      show(dangqianyeData);

      $(".addPage")
        .eq(pageNum - 1)
        .addClass("active6")
        .siblings()
        .removeClass("active6");
      dangqianyePage = pageNum;
    }

    // 点击页码 渲染页码对应的相应数据到tbody
    $(".page").on("click", ".addPage", function () {
      let pageNum = $(this).text();
      showData(arr, pageNum);
    });

    // 点击上一页按钮 当前页的上一页数据渲染 以及页码
    $("#pre").click(function () {
      if (dangqianyePage > 1) {
        let shangyiye = dangqianyePage - 1;
        showData(arr, shangyiye);
      }
    });

    // 下一页
    $("#next").click(function () {
      if (dangqianyePage < maxPage) {
        let xiayiye = dangqianyePage + 1;
        showData(arr, xiayiye);
      }
    });

    // 在跳转页面里输入数字 点击跳转按钮 跳转到数字对应的页码
    $("#tiao").click(function () {
      let pageNum = $("#tiaopage").val();
      for (let i = 1; i <= maxPage; i++) {
        if (pageNum == i) {
          dangqianyePage = pageNum;
        }
      }
      showData(arr, dangqianyePage);
    });

    // 点击启用按钮 启用按钮样式改变 arr的启用数据变为0
    $("tbody").on("click", ".qy-box", function () {
      // 样式
      if ($(this).css("text-align") == "left") {
        $(this).css({
          textAlign: "right",
          paddingRight: "5px",
          backgroundColor: "#6c6f71",
        });
        $(this)
          .children()
          .eq(1)
          .css({ left: "-8px", backgroundColor: "#eaeaea" });
        $(this).children().eq(0).text("禁用");
      } else {
        $(this).css({
          textAlign: "left",
          paddingLeft: "5px",
          backgroundColor: "#d0c2bd",
        });
        $(this)
          .children()
          .eq(1)
          .css({ left: "30px", backgroundColor: "#b09991" });
        $(this).children().eq(0).text("启用");
      }

      // 数据
      let qyId = $(this).attr("data-id");
      if ($(this).css("text-align") == "left") {
        qyz = 1;
      } else {
        qyz = 0;
      }

      for (let i = 0; i < arr.length; i++) {
        if (qyId == arr[i].id) {
          arr[i].qiyong = qyz;
        }
      }
    });
    // 点击禁用按钮
    $("tbody").on("click", ".jy-box", function () {
      let qyId = $(this).attr("data-id");

      if ($(this).css("text-align") == "right") {
        $(this).css({
          textAlign: "left",
          paddingLeft: "5px",
          backgroundColor: "#d0c2bd",
        });
        $(this)
          .children()
          .eq(1)
          .css({ left: "30px", backgroundColor: "#b09991" });
        $(this).children().eq(0).text("启用");
        qyz = 1;
        for (let i = 0; i < arr.length; i++) {
          if (qyId == arr[i].id) {
            arr[i].qiyong = qyz;
          }
        }
      } else {
        $(this).css({
          textAlign: "right",
          paddingRight: "5px",
          backgroundColor: "#6c6f71",
        });
        $(this)
          .children()
          .eq(1)
          .css({ left: "-8px", backgroundColor: "#eaeaea" });
        $(this).children().eq(0).text("禁用");
        qyz = 0;
        for (let i = 0; i < arr.length; i++) {
          if (qyId == arr[i].id) {
            arr[i].qiyong = qyz;
          }
        }
      }
    });
    // 点击编辑按钮
    $("tbody").on("click", ".btn-bj", function () {
      $(".modal-bj").css({ top: "20%" });
      $(".h").css({ display: "block" });
      bjId = $(this).attr("data-id");

      // 模态框的内容
      for (let i = 0; i < arr.length; i++) {
        if (bjId == arr[i].id) {
          wzmc = arr[i].mingcheng;
          wzyj = arr[i].yuanjia;
          wzxj = arr[i].xianjia;
          qyz = arr[i].qiyong;
          fl = arr[i].fenlei;
        }
      }
      $("#mc").val(wzmc);
      $("#yj").val(wzyj);
      $("#xj").val(wzxj);
      $("option").text(fl);
      if (qyz == 1) {
        $(".kai").prop("checked", true);
      } else if (qyz == 0) {
        $(".guan").prop("checked", true);
      }
    });

    // 点击除模态框以外的位置 模态框消失
    $("body").click(function (e) {
      if ($(e.target).closest(".btn-bj,.bj-box").length == 0) {
        $(".modal-bj").css({ top: "-600px" });
        $(".h").css({ display: "none" });
      }
    });

    // 点击取消按钮 以及点击头部关闭按钮
    $("#qx").click(function () {
      $(".modal-bj").css({ top: "-600px" });
      $(".h").css({ display: "none" });
    });
    $(".iconfont").click(function () {
      $(".modal-bj").css({ top: "-600px" });
      $(".h").css({ display: "none" });
    });

    // 点击保存按钮
    $("#qd").click(function () {
      let userMc = $("#mc").val();
      let userYj = $("#yj").val();
      let userXj = $("#xj").val();

      if ($(".kai").prop("checked")) {
        userQy = 1;
      } else if ($(".guan").prop("checked")) {
        userQy = 0;
      }

      for (let i = 0; i < arr.length; i++) {
        if (bjId == arr[i].id) {
          arr[i].mingcheng = userMc;
          arr[i].yuanjia = userYj;
          arr[i].xianjia = userXj;
          arr[i].qiyong = userQy;
        }
      }

      showData(arr, dangqianyePage);
      $(".modal-bj").css({ top: "-600px" });
      $(".h").css({ display: "none" });
    });
  </script>
</html>
